* {
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    width: 100vw;
    height: 100vh;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

/*公共样式：垂直弹性布局*/
.flex-column {
    display: flex;
    flex-direction: column;
}

/*完美居中方案*/
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.movie-head {
    flex: 8;
    background: linear-gradient(135deg, #feb692, #ea5455);
}

.head div {
    color: red;
}

.city-icon,
.cha-icon {
    flex: 6;
}

.movie-icon {
    flex: 15;
}

.lun {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
}

.slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide {
    transition: opacity 0.5s ease-in-out;
}

.movie-buy {
    padding: 20px;
    position: relative;
}



.movie-message {
    padding: 25px;

}

.buy {
    padding: 25px;
}



.movie-one {
    border: #5efce8;
    border-style: solid;
    border-width: 2px;
    width: 370px;
    height: 200px;
}




.hellotalk,
.classification,
.ranking,
.my {
    flex: 30;
}

.foot {
    background: #fff;
    border: linear-gradient(135deg, #5efce8, #736efe);
    border-style: solid;
    border-width: 2px;
    padding: 20px;
}